import React, { Component } from 'react'
import TestMount from './components/TestMount'
import TestUnmount from './components/TestUnmount';
import TestUpdate from './components/TestUpdate'

export default class App extends Component {
    state = {
        msg:'atguigu',
        flag:true
    }
    render() {
        let {msg} = this.state;
        return (
            <div>
                <h3>App</h3>
                <p>App state msg: {msg}</p>
                <p><button onClick={()=>{
                    this.setState({
                        msg:msg + '!'
                    })
                }}>msg + !</button></p>
                <hr />

                <h3>挂载阶段</h3>
                {/* <TestMount/> */}

                <h3>组件更新</h3>
                {/* <TestUpdate msg={msg}/> */}

                <h3>组件卸载</h3>
                <button onClick={()=>this.setState({flag:!this.state.flag})}>挂载/卸载</button>
                <div>挂载/卸载: {this.state.flag && <TestUnmount/>}</div>
            </div>
        )
    }
}
